<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>
<div class="normal-table-wrap bg-color-no p-b-50">
  <form nz-form [formGroup]="validateForm">

    <nz-card [nzBordered]="false" nzTitle="试题管理">
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="18" nzRequired>题目类型</nz-form-label>
        <nz-form-control [nzSm]="12" [nzXs]="18" [nzErrorTip]="combineTpl">
          <nz-select formControlName="type" nzPlaceHolder="选择题目类型" nzAllowClear>
            <nz-option *ngFor="let item of testquestionOptionDtos" [nzValue]="item.value"
                       [nzLabel]="item.label"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="18" nzRequired>难度等级</nz-form-label>
        <nz-form-control [nzSm]="12" [nzXs]="18" [nzErrorTip]="combineTpl">
          <nz-select formControlName="difficultyGrade" nzPlaceHolder="选择难度等级" nzAllowClear>
            <nz-option *ngFor="let item of difficultyOptions" [nzValue]="item.value"
                       [nzLabel]="item.label"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="18" nzRequired>所属题库</nz-form-label>
        <nz-form-control [nzSm]="12" [nzXs]="18" [nzErrorTip]="combineTpl">
          <nz-select formControlName="questionBlanks" nzMode="multiple" nzPlaceHolder="选择题库" [nzAllowClear]="true">
            <nz-option *ngFor="let item of listOfOptions" [nzLabel]="item.label"
                       [nzValue]="item.value"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="18" nzRequired>题目内容</nz-form-label>
        <nz-form-control [nzSm]="12" [nzXs]="18" [nzErrorTip]="combineTpl" nzExtra="所填内容不能超过255字">
          <textarea rows="4" nz-input formControlName="content"></textarea>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="18">整题解析</nz-form-label>
        <nz-form-control [nzSm]="12" [nzXs]="18" [nzErrorTip]="combineTpl" nzExtra="所填内容不能超过255字">
          <textarea rows="4" nz-input formControlName="analysis"></textarea>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="4" [nzXs]="18">题目图片</nz-form-label>
        <nz-form-control [nzSm]="12" [nzXs]="18" [nzErrorTip]="combineTpl">
          <nz-upload
            (nzChange)="uploadFn($event,'pictureUrl')"
            [nzRemove]="handleRemove.bind(this)"
            [nzLimit]="1"
            [nzAction]="uploadUrl"
            nzListType="picture-card"
            [(nzFileList)]="fileList"
            [nzShowButton]="fileList.length < 1"
            [nzShowUploadList]="showUploadList"
            [nzPreview]="handlePreview.bind(this)">
            <i nz-icon nzType="plus"></i>
            <div class="ant-upload-text">上传</div>
          </nz-upload>
          <input nz-input formControlName="pictureUrl" placeholder="图片" [hidden]="true">
        </nz-form-control>
      </nz-form-item>
    </nz-card>

    <nz-card [nzBordered]="false" nzTitle="答案管理">
      <nz-form-item>
        <nz-form-control [nzSm]="4" [nzXs]="18">
          <button nz-button nzType="primary" class="add-button" (click)="add()">
            <i nz-icon nzType="plus"></i>
            新增
          </button>
        </nz-form-control>
      </nz-form-item>

      <nz-table [nzFrontPagination]="false" [nzBordered]="true"
                formArrayName="questionOptionDtos"
                [nzData]="items.value">
        <thead>
        <tr>
          <th nzWidth="10%" [nzAlign]="'center'">是否答案</th>
          <th nzWidth="70%">答案内容</th>
          <th nzWidth="12%">图片路径</th>
          <th nzWidth="8%" [nzAlign]="'center'">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of items.controls; let i = index;" [formGroupName]="i">
          <td align="center"><label nz-checkbox formControlName="answerFlag"></label></td>
          <td>
            <nz-form-control [nzSm]="24" [nzXs]="24" nzExtra="所填内容不能超过255字" [nzErrorTip]="combineTpl">
              <textarea nzAutosize nz-input formControlName="content"></textarea>
            </nz-form-control>
          </td>
          <td>
            <nz-upload
              (nzChange)="uploadFn($event,'picture',i)"
              [nzRemove]="handleRemove.bind(this)"
              [nzLimit]="1"
              class="upload-list-inline"
              nzListType="picture"
              [nzAction]="uploadUrl"
              [(nzFileList)]="answerFileList[i]"
              [nzShowButton]="answerFileList[i]?.length < 1"
              [nzShowUploadList]="showUploadList"
              [nzPreview]="handlePreview.bind(this)">
              <button nz-button>
                <span><i nz-icon nzType="upload"></i>Upload</span>
              </button>
            </nz-upload>
            <input nz-input formControlName="pictureUrl" placeholder="图片" [hidden]="true">
          </td>
          <td align="center"><i nz-icon nzType="delete" nzTheme="outline" (click)="del(i)"></i></td>
        </tr>
        </tbody>
      </nz-table>

    </nz-card>


  </form>

  <ng-template #combineTpl let-control>
    <ng-container *ngIf="control.hasError('message')">{{control.errors.message}}</ng-container>
    <ng-container *ngIf="control.hasError('required')">必填项</ng-container>
  </ng-template>
</div>

<app-footer-submit>
  <button nz-button type="primary" nzType="primary" (click)="submit()">保存</button>
  <button nz-button type="default" (click)="returnToList()" class="m-l-15">返回</button>
</app-footer-submit>

<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
          (nzOnCancel)="previewVisible = false">
  <ng-template #modalContent>
    <img [src]="previewImage" [ngStyle]="{ width: '100%' }"/>
  </ng-template>
</nz-modal>

